<template>
  <a-drawer
    width="50%"
    title="客户进件审批"
    :label-col="4"
    :wrapper-col="14"
    :visible="open"
    :body-style="{ height: 'calc(100vh - 100px)', overflow: 'auto' }"
    @close="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules" layout="vertical">
      <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
        <a-row
          :gutter="32"
          style="width: 65%; margin-left: 20%; margin-top: -10px"
        >
          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >基本信息</span
                >
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="客户姓名" prop="customerName">
                <a-input
                  v-model="form.customerName"
                  placeholder="请选择客户"
                  disabled
                  @search="handleOnSearchCustomer"
                >
                </a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="电话" prop="phone">
                <a-input
                  v-model="form.phone"
                  placeholder="请输入电话"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="申请额度（元）" prop="yxEdu">
                <a-input-number
                  v-model="form.yxEdu"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入申请额度（元）"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="客服" prop="servcieUserName">
                <a-input
                  v-model="form.servcieUserName"
                  placeholder="请选择客服"
                  style="width: 58%"
                  disabled
                >
                </a-input>
                <a-button
                  type="primary"
                  icon="customer-service"
                  @click="chooseUserVisible = true"
                  style="margin-left: 5px"
                >
                </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >产品信息</span
                >
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="8">
              <a-form-model-item label="服务机构（一）" prop="orgType">
                <a-select
                  placeholder="请选择服务机构"
                  v-model="form.orgType"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  disabled
                >
                  <a-select-option
                    v-for="(d, index) in orgTypeOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="产品名称（一）" prop="productId">
                <a-select
                  placeholder="请选择产品"
                  v-model="form.productId"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  @select="handleChooseProduct"
                >
                  <a-select-option
                    v-for="d in productList"
                    :key="d.productName"
                    :value="d.id"
                    >{{ d.productName }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否通过" prop="isTgOne">
                <a-radio-group v-model="form.isTgOne">
                  <a-radio value="1"> 通过 </a-radio>
                  <a-radio value="2"> 未通过 </a-radio>
                </a-radio-group></a-form-model-item
              >
            </a-col>
          </a-row>
          <a-row :gutter="32" v-if="form.orgTypeTwo">
            <a-col :span="8">
              <a-form-model-item label="服务机构（二）" prop="orgTypeTwo">
                <a-select
                  placeholder="请选择服务机构"
                  v-model="form.orgTypeTwo"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  disabled
                >
                  <a-select-option
                    v-for="(d, index) in orgTypeOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="产品名称（二）" prop="productIdTwo">
                <a-select
                  placeholder="请选择产品"
                  v-model="form.productIdTwo"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  @select="handleChooseProductTwo"
                >
                  <a-select-option
                    v-for="d in productListTwo"
                    :key="d.productName"
                    :value="d.id"
                    >{{ d.productName }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否通过" prop="isTgTwo">
                <a-radio-group v-model="form.isTgTwo">
                  <a-radio value="1"> 通过 </a-radio>
                  <a-radio value="2"> 未通过 </a-radio>
                </a-radio-group></a-form-model-item
              >
            </a-col>
          </a-row>
          <a-row :gutter="32" v-if="form.orgTypeThree">
            <a-col :span="8">
              <a-form-model-item label="服务机构（三）" prop="orgTypeThree">
                <a-select
                  placeholder="请选择服务机构"
                  v-model="form.orgTypeThree"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  disabled
                >
                  <a-select-option
                    v-for="(d, index) in orgTypeOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="产品名称（三）" prop="productIdThree">
                <a-select
                  placeholder="请选择产品"
                  v-model="form.productIdThree"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  @select="handleChooseProductThree"
                >
                  <a-select-option
                    v-for="d in productListThree"
                    :key="d.productName"
                    :value="d.id"
                    >{{ d.productName }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否通过" prop="isTgThree">
                <a-radio-group v-model="form.isTgThree">
                  <a-radio value="1"> 通过 </a-radio>
                  <a-radio value="2"> 未通过 </a-radio>
                </a-radio-group></a-form-model-item
              >
            </a-col>
          </a-row>

          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >其他信息</span
                >
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="24">
              <a-form-model-item label="备注" prop="remark">
                <a-input
                  type="textarea"
                  v-model="form.remark"
                  placeholder="请输入备注"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-row>
      </a-spin>
      <div class="bottom-control">
        <a-space>
          <a-button
            type="primary"
            @click="handleJinjianShenhe('5')"
            :loading="loading"
          >
            审批通过
          </a-button>
          <a-button
            @click="handleJinjianShenheRefuse('-5')"
            type="danger"
            :loading="refuseLoading"
          >
            驳回进件
          </a-button>

          <a-button @click="cancel"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>
    <a-modal
      :visible="chooseUserVisible"
      title="选择客服"
      v-if="chooseUserVisible"
      width="55%"
      @ok="chooseUserVisible = false"
      @cancel="chooseUserVisible = false"
      :dialog-style="{ top: '10px' }"
    >
      <change-user
        @getUser="handleManualShare"
        :isCheckBox="true"
        :isKefu="1"
      />
    </a-modal>
  </a-drawer>
</template>
<script>
import BizJinjianInfoEditForm from "./BizJinjianInfoForm";
export default {
  ...BizJinjianInfoEditForm,
};
</script>
